<template>
  <div class="nav-menu">
    <div 
      v-for="item in navItems" 
      :key="item.id"
      class="nav-item"
      :class="{ active: item.active }"
      @click="handleNavClick(item)"
    >
      {{ item.name }}
      <span class="close-icon" @click.stop="handleClose(item)">×</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      navItems: [
        { id: 1, name: '完满活动管理', active: true },
        { id: 2, name: '组织活动管理', active: false },
        { id: 3, name: '考勤模块管理', active: false },
        { id: 4, name: '班级模块管理', active: false },
        { id: 5, name: '通知消息管理', active: false }
      ]
    }
  },
  methods: {
    handleNavClick(item) {
      this.navItems.forEach(nav => nav.active = nav.id === item.id)
      // 处理导航点击事件
    },
    handleClose(item) {
      // 处理关闭按钮点击事件
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/navigation.scss';
</style> 